<template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    :footer="null"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form :form="form">

        <a-form-item label="姓名" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['name']" placeholder="请输入姓名" disabled="true"/>
        </a-form-item>
        <a-form-item label="性别" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-select v-decorator="['sex']" placeholder="请选择性别" disabled="true">
            <a-select-option :value="1">男</a-select-option>
            <a-select-option :value="2">女</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="年龄" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input-number v-decorator="['age']" placeholder="请输入年龄" style="width: 100%" disabled="true"/>
        </a-form-item>
        <a-form-item label="手机号" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-input v-decorator="['phone']" placeholder="请输入手机号" disabled="true"/>
        </a-form-item>
        <a-form-item label="照片" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-upload text="照片"
                    :number="1"
                    v-decorator="['photo']"
                    fileType="image" disabled="true"/>
        </a-form-item>
        <a-form-item label="身份证人像面" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-upload text="图片"
                    :number="1"
                    v-decorator="['idCardPhotoA']"
                    fileType="image" disabled="true"/>
        </a-form-item>
        <a-form-item label="身份证国徽面" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-upload text="图片"
                    :number="1"
                    v-decorator="['idCardPhotoB']"
                    fileType="image" disabled="true"/>
        </a-form-item>
        <a-form-item label="简历" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <j-upload text="简历"
                    :number="1"
                    v-decorator="['resume']"
                    fileType="file" disabled="true"/>
        </a-form-item>
        <a-form-item label="介绍" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea v-decorator="['introduction']" placeholder="请输入介绍" style="width: 100%" disabled="true"/>
        </a-form-item>

        <!--审核-->
        <a-form-item label="类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-radio-group v-decorator="['type',validatorRules.type]">
            <a-radio :value="0">
              正式
            </a-radio>
            <a-radio :value="1">
              预备
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="审核备注" :labelCol="labelCol" :wrapperCol="wrapperCol">
          <a-textarea v-decorator="['reviewRemark',validatorRules.reviewRemark]" placeholder="请输入审核备注"/>
        </a-form-item>
      </a-form>
    </a-spin>

    <div class="operation">
      <a-button @click="handleCancel()">关闭</a-button>
    </div>
  </j-modal>
</template>

<script>

  import {getAction, httpAction, postAction} from '@/api/manage'
  import pick from 'lodash.pick'
  import {validateDuplicateValue} from '@/utils/util'
  import JDate from '@/components/jeecg/JDate'
  import JUpload from '@/components/jeecg/JUpload'
  import ATextarea from "ant-design-vue/es/input/TextArea";


  export default {
    name: "MedicalEscortApplicationInfoModal",
    components: {
      ATextarea,
      JDate,
      JUpload,
    },
    data() {
      return {
        form: this.$form.createForm(this),
        title: "操作",
        width: 800,
        visible: false,
        model: {},
        labelCol: {
          xs: {span: 24},
          sm: {span: 5},
        },
        wrapperCol: {
          xs: {span: 24},
          sm: {span: 16},
        },
        confirmLoading: false,
        validatorRules: {
          type: {
            rules: [{required: true, message: '请选择类型!'},]
          },
          reviewRemark: {
            rules: [{required: true, message: '请输入审核备注!'},]
          },
        },
        url: {
          
        }
      }
    },
    
    methods: {
      handleView(record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'userId', 'photo', 'introduction', 'resume', 'name', 'sex', 'age', 'phone', 'idCardPhotoA', 'idCardPhotoB', 'type', 'status', 'reviewTime', 'reviewRemark', 'createBy', 'createTime', 'updateBy', 'updateTime', 'delFlag'))
        })
      },
      close() {
        this.$emit('close');
        this.visible = false;
      },
      handleCancel() {
        this.close()
      }
      
    }
  }
</script>
<style lang="less" scoped>
  .info-detail {
    line-height: 30px;
    font-size: 14px;
    color: #333333;
  }

  .info-owner .row {
    display: flex;
    flex-direction: row;
  }

  .info-owner .row div {
    margin-right: 30px;
  }

  .info-owner .row .item {
    display: flex;
    flex-direction: row;
    flex: 1;
    margin-right: auto;
  }

  .info-owner .row .item div:first-child {
    flex: 1;
  }

  .info-owner .row.has-bottom {
    margin-bottom: 10px;
    padding-bottom: 5px;
    border-bottom: 1px solid #dddddd;
  }

  .info-table {
    margin: 20px 0;
  }

  .operation {
    margin-top: 20px;
    text-align: right;
  }

  .column-item .ant-btn,
  .operation .ant-btn {
    margin-left: 20px;
  }

  .column-item .ant-btn:first-child,
  .operation .ant-btn:first-child {
    margin-left: 0px;
  }
</style>